<template>
    <view class="content">
        <div class="card" v-for="item in right" v-if="flag == '生产报备通知'">
            <div style="width: 90%;margin-left: 5%;">
                <div style="height: 10px;"></div>
                <div class="flexTop">
                    <div style="font-size: 18px;font-weight: 500;">{{ item.id }}</div>
                    <div class="status">{{ item.isRead===0?'未读':'已读' }}</div>
                </div>
                <div style="height: 10px;"></div>
            </div>
            <u-line color="#83AF92"></u-line>
            <div style="height: 10px;"></div>
            <div class="newFlex">
                <div>提交日期</div>
                <div>{{ item.createTime }}</div>
            </div>
            <div style="height: 15px;"></div>
            <div class="newFlex">
                <div>提交人</div>
                <div>{{ item.subPerson }}</div>
            </div>
            <div style="height: 15px;"></div>
            <div class="newFlex">
                <div>生产部门</div>
                <div>{{ item.deptName }}</div>
            </div>
            <div style="height: 15px;"></div>
            <div class="newFlex">
                <div>设备名称</div>
                <div>{{ item.deviceName }}</div>
            </div>
            <div style="height: 15px;"></div>
            <div class="newFlex">
                <div>生产描述</div>
                <div>{{ item.productionDescrip }}</div>
            </div>
            <div style="height: 15px;"></div>
            <div class="readNot" v-if="item.isRead === 0">已读</div>
            <div style="height: 15px;" v-if="item.isRead === 0"></div>
        </div>
        <div class="card" v-for="item in right" v-if="flag == '设备报修通知'">
            <div style="width: 90%;margin-left: 5%;">
                <div style="height: 10px;"></div>
                <div class="flexTop">
                    <div style="font-size: 18px;font-weight: 500;">{{ item.deviceNo }}</div>
                    <div class="status">{{ item.isRead===0?'未读':'已读' }}</div>
                </div>
                <div style="height: 10px;"></div>
            </div>
            <u-line color="#83AF92"></u-line>
            <div style="height: 10px;"></div>
            <div class="newFlex">
                <div>提交日期</div>
                <div>{{ item.createTime }}</div>
            </div>
            <div style="height: 15px;"></div>
            <div class="newFlex">
                <div>提交人</div>
                <div>{{ item.subPeople }}</div>
            </div>
            <div style="height: 15px;"></div>
            <div class="newFlex">
                <div>设备名称</div>
                <div>{{ item.deviceName }}</div>
            </div>
            <div style="height: 15px;"></div>
            <div class="newFlex">
                <div>报修原因</div>
                <div>{{ item.detailDescription }}</div>
            </div>
            <div style="height: 15px;"></div>
            <div class="newFlex">
                <div>紧急程度</div>
                <div>{{ item.emerDegree }}</div>
            </div>
            <div style="height: 15px;"></div>
            <div style="width:90%;margin-left: 5%;display: flex;justify-content: space-between;">
                <image style="width: 150px;height: 150px;" :src="base+item.scenePhoto.split(',')[0]" />
                <image style="width: 150px;height: 150px;" :src="base+item.scenePhoto.split(',')[1]" />
            </div>
            <div style="height: 15px;"></div>
            <div class="readNot" v-if="item.isRead === 0">已读</div>
            <div style="height: 15px;" v-if="item.isRead === 0"></div>
        </div>
        <div class="card" v-for="item in right" v-if="flag == '设备报停通知'">
            <div style="width: 90%;margin-left: 5%;">
                <div style="height: 10px;"></div>
                <div class="flexTop">
                    <div style="font-size: 18px;font-weight: 500;">{{ item.deviceNo }}</div>
                    <div class="status">{{ item.isRead===0?'未读':'已读' }}</div>
                </div>
                <div style="height: 10px;"></div>
            </div>
            <u-line color="#83AF92"></u-line>
            <div style="height: 10px;"></div>
            <div class="newFlex">
                <div>提交日期</div>
                <div>{{ item.createTime }}</div>
            </div>
            <div style="height: 15px;"></div>
            <div class="newFlex">
                <div>提交人</div>
                <div>{{ item.submitPeople }}</div>
            </div>
            <div style="height: 15px;"></div>
            <div class="newFlex">
                <div>设备名称</div>
                <div>{{ item.deviceName }}</div>
            </div>
            <div style="height: 15px;"></div>
            <div class="newFlex">
                <div>报停时长（小时）</div>
                <div>{{ item.stopDuration }}</div>
            </div>
            <div style="height: 15px;"></div>
            <div class="newFlex">
                <div>报停原因</div>
                <div>{{ item.reasonStop }}</div>
            </div>
            <div style="height: 15px;"></div>
            <div class="newFlex">
                <div>报停详情</div>
                <div>{{ item.description }}</div>
            </div>
            <div style="height: 15px;"></div>
            <div style="width:90%;margin-left: 5%;display: flex;justify-content: space-between;">
                <image style="width: 150px;height: 150px;" :src="base+item.devicePhoto.split(',')[0]" />
                <image style="width: 150px;height: 150px;" :src="base+item.devicePhoto.split(',')[1]" />
            </div>
            <div style="height: 15px;"></div>
            <div class="readNot" v-if="item.isRead === 0">已读</div>
            <div style="height: 15px;" v-if="item.isRead === 0"></div>
        </div>
        <div style="height: 20px;"></div>
    </view>
</template>


<script>
import { stopNotice, repairNotice, plantNotice } from '../api/api.js';
import request from '../../common/request';
export default {
    data() {
        return {
            type: '',
            typeArr: '',
            left: [
                { type: 1, title: '报停通知' },
                { type: 2, title: '报修通知' },
                { type: 3, title: '报备通知' },
            ],
            right: [],
            leftIndex: 0,
            flag: '',
            base:'',
            request:request
        }
    },
    methods: {
        // 切换
        toggle(item, index) {
            this.leftIndex = index;

            console.log(item);
            // this.typeArr = this.right.filter((item)=>item.type == this.type);
            if (item.title == '报修通知') {
                this.repairList();
                this.type = item.type;
            } else if (item.title == '报停通知') {
                this.stopList();
                this.type = item.type;
            } else if (item.title == '报备通知') {
                this.planList();

                this.type = item.type;
            }
        },
        detail(item) {
            console.log(item);
            let obj = {
                id: item.id,
                index: this.leftIndex
            }
            uni.navigateTo({
                url: `/pagesPlant/index/noticeDetail?params=${JSON.stringify(obj)}`,
            })
        },
        stopList() {
            stopNotice().then(res => {
                console.log(res.data, 'res');
                if (res.data.code == 200) {
                    this.right = res.data.data;
                    // console.log(this.right);
                }
            })
        },
        repairList() {
            repairNotice().then(res => {
                console.log(res.data, 'res');
                if (res.data.code == 200) {
                    this.right = res.data.data;
                    
                }
            })
        },
        planList() {
            plantNotice().then(res => {
                console.log(res.data, 'res');
                if (res.data.code == 200) {
                    this.right = res.data.data;
                }
            })
        }
    },
    onLoad(options) {
        this.base = this.request.config.baseURL;
        console.log(options);
        this.flag = options.flag;
        if (options.flag == '生产报备通知') {
            this.planList();
            uni.setNavigationBarTitle({
                title: '生产报备通知'
            });
        } else if (options.flag == '设备报修通知') {
            this.repairList();
            uni.setNavigationBarTitle({
                title: '设备报修通知'
            });
        } else {
            this.stopList();
            uni.setNavigationBarTitle({
                title: '设备报停通知'
            });
        }
        // this.type = this.left[0].type;
        // this.typeArr = this.right.filter((item) => item.type == this.type);
    },
    onShow() {
        // this.stopList();
        // this.leftIndex = 0;
    }
}
</script>

<style lang="scss">
.readNot{
    width: 90%;
    margin-left: 5%;
    background: #000000;
    color: #fff;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card {
    background: #fff;
    border-radius: 15px;
    width: 90%;
    margin-left: 5%;
    margin-top: 15px;
}

.newFlex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    margin-left: 5%;
}
.flexTop{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.content {
    // display: flex;
    background-color: #f3f3f3;
    min-height: 100vh;
    overflow-y: scroll;
}

// .left{
//     width: 30%;
//     background: #D1E8CE;
//     color: #5D8369;
//     height: 100vh;
// }
// .right{
//     width: 70%;
//     background: #B0CCA7;
//     height: 100vh;
//     overflow-y: scroll;
// }
.left-title {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.active-class {
    background: #B0CCA7;
    height: 40px;
    color: #1A512C;
}

// .card {
//     border-radius: 10px;
//     background: #D1E8CE;
//     color: #1A512C;
//     font-weight: 500;
//     font-size: 14px;
// }

.cardin {
    width: 90%;
    margin-left: 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.status {
    color: #fff;
    background: #306C44;
    border-radius: 4px;
    font-size: 12px;
    padding-right: 30rpx;
    padding-left: 30rpx;
    padding-top: 10rpx;
    padding-bottom: 10rpx;
}
</style>